<template>
  <view class="container">
    <view class="header">
      <view class="user-info">
        <view class="avatar" @click="handleAvatarClick">
          <image :src="userInfo.avatar || '/static/images/icon.png'" mode="aspectFill"></image>
          <!-- 添加虚线加号按钮 -->
          <view class="avatar-overlay">
            <text class="add-icon">+</text>
          </view>
        </view>
        <view class="info">
          <view class="name">{{ userInfo.name }}</view>
          <view class="role">{{ userInfo.role }}</view>
        </view>
      </view>
    </view>

    <view class="info-list">
      <view class="info-item">
        <view class="item-name">姓名</view>
        <view class="item-value">
          <input v-if="isEditing" v-model="userInfo.name" class="input" />
          <text v-else>{{ userInfo.name }}</text>
        </view>
      </view>

      <view class="info-item">
        <view class="item-name">电话</view>
        <view class="item-value">
          <input v-if="isEditing" v-model="userInfo.phone" class="input" />
          <text v-else>{{ userInfo.phone }}</text>
        </view>
      </view>

      <view class="info-item">
        <view class="item-name">邮箱</view>
        <view class="item-value">
          <input v-if="isEditing" v-model="userInfo.email" class="input" />
          <text v-else>{{ userInfo.email }}</text>
        </view>
      </view>
    </view>

    <view class="actions">
      <button @click="handleEdit" class="edit-btn">{{ isEditing ? '保存' : '编辑' }}</button>
      <button v-if="isEditing" @click="handleCancel" class="cancel-btn">取消</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: '/static/images/icon.png', // 默认头像
        name: '张三',
        phone: '1234567890',
        email: 'zhangsan@example.com',
        role: '管理员'
      },
      isEditing: false
    };
  },
  methods: {
    // 头像点击处理，选择图片
    handleAvatarClick() {
      uni.chooseImage({
        count: 1, // 选择一张图片
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.userInfo.avatar = tempFilePath; // 更新头像路径
          this.saveUserInfo(); // 保存到本地存储
        },
        fail: () => {
          uni.showToast({
            title: '头像上传失败',
            icon: 'none'
          });
        }
      });
    },

    // 编辑按钮点击事件
    handleEdit() {
      if (this.isEditing) {
        // 保存操作
        this.saveUserInfo();
      }
      this.isEditing = !this.isEditing;
    },
    
    // 保存修改的个人信息
    saveUserInfo() {
      uni.setStorageSync('userInfo', this.userInfo); // 假设使用 uni 的本地存储
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });
    },

    // 取消编辑，恢复原始数据
    handleCancel() {
      const storedUserInfo = uni.getStorageSync('userInfo');
      if (storedUserInfo) {
        this.userInfo = storedUserInfo;
      }
      this.isEditing = false;
    }
  },

  onLoad() {
    const storedUserInfo = uni.getStorageSync('userInfo');
    if (storedUserInfo) {
      this.userInfo = storedUserInfo;
    }
  }
};
</script>

<style>
.container {
  background: #f5f7fa;
  padding: 20rpx;
}

.header {
  background: #003b90;
  padding: 40rpx 30rpx;
  color: #fff;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  overflow: hidden;
  margin-right: 30rpx;
  position: relative;
  cursor: pointer;
}

.avatar image {
  width: 100%;
  height: 100%;
}

.avatar-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 20rpx;
}

.add-icon {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.info .name {
  font-size: 36rpx;
  font-weight: bold;
}

.info .role {
  font-size: 28rpx;
  opacity: 0.8;
}

.info-list {
  margin-top: 20rpx;
  background: #fff;
  padding: 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1px solid #f0f0f0;
}

.item-name {
  font-size: 30rpx;
  color: #333;
}

.item-value {
  font-size: 30rpx;
  color: #666;
}

.input {
  width: 200rpx;
  padding: 10rpx;
  font-size: 28rpx;
  border-radius: 4rpx;
  border: 1px solid #ccc;
}

.actions {
  margin-top: 30rpx;
  text-align: center;
}

.edit-btn,
.cancel-btn {
  background-color: #003b90;
  color: #fff;
  padding: 15rpx 40rpx;
  font-size: 30rpx;
  border-radius: 30rpx;
  margin: 10rpx;
}

.cancel-btn {
  background-color: #ccc;
}
</style>
